<template>
	<view class="ziti">
		<view class="pageHeader dFlex jStart_aCenter" :style="{'height': (pageHeader+10) + 'px','padding-top': pageStatus + 'px'}">
			<view class="backIcon imgPublic" @tap.stop='back'>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode='widthFix'></image>
			</view>
			<view class="searchBox dFlex jStart_aCenter">
				<view class="searchIcon imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/searchIcon.png" mode="widthFix"></image>
				</view>
				<view class="ipt">
					<input type="text" v-model="keyword" @input='searchKw' placeholder="搜索更多地址和自提点">
				</view>
			</view>
		</view>
		<!-- <view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jStart_aCenter']">
				<view class="backIcon imgPublic" @tap.stop='back'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/backIcon2.png" mode='widthFix'></image>
				</view>
				<view class="searchBox dFlex jStart_aCenter">
					<view class="searchIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/searchIcon.png" mode="widthFix"></image>
					</view>
					<view class="ipt">
						<input type="text" v-model="keyword" @input='searchKw' placeholder="搜索更多地址和自提点">
					</view>
				</view>
			</view>
		</view> -->
		<view class="map">
			<map id='map' style="width: 100%; height:100%;" :latitude="lat" :longitude="lng" :markers="covers" show-location scale='14'></map>
		</view> 
		<view class="current">
			<view class="address">
				<view class="currentAdd dFlex jBetween_aCenter">
					<view class="addLeft dFlex jStart_aCenter">
						<view class="addIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/add1.png" mode="widthFix"></image>
						</view>
						<view>{{add_detail}}</view>
					</view>
					<view class="refresh dFlex jEnd_aCenter" @tap.stop='refresh'>
						<view class="refreshIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/refresh.png" mode="widthFix"></image>
						</view>
						<text>重新定位</text>
					</view>
				</view>
				<view class="detail_add">{{address}}</view>
			</view>
			<view class="shop">
				<view class="shopImg imgPublic">
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/current.png" mode="widthFix"></image>
				</view>
				<view class="shopContent">
					<view class="txt">当前自提点</view>
					<view class="content dFlex jStart_aStart">
						<view class="shopLogo imgPublic">
							<image :src="currentZiti.store_imgs" v-if="currentZiti.store_imgs"></image>
							<image v-else src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
						</view>
						<view class="shopInfo">
							<view class="shopName">{{currentZiti.store_name?currentZiti.store_name:'暂未填写'}}</view>
							<view class="shopAdd">{{currentZiti.address}}</view>
							<view class="tag" v-if="currentZiti.is_lc && !currentZiti.is_ld">冷藏</view>
							<view class="tag" v-if="currentZiti.is_ld && !currentZiti.is_lc">冷动</view>
							<view class="tag" v-if="currentZiti.is_ld && currentZiti.is_lc">冷动冷藏</view>
							<view class="distance">距离：<text>{{currentZiti.distance_km}}</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 自提点列表 -->
		<view class="shopList">
			<view class="title">附近自提点</view>
			<view class="list" v-if="list.length">
				<view :class="['shopOne','dFlex','jStart_aStart',selZiti.id == item.id?'active':'']" v-for="(item,index) in list" :key='index' @tap='selZt(item)'>
					<view class="shopImg imgPublic">
						<image v-if="item.store_imgs" :src="item.store_imgs" mode="widthFix"></image>
						<image v-if="!item.store_imgs" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
					</view>
					<view class="shopInfo dFlex jBetween_aCenter">
						<view class="info">
							<view class="shopName">{{item.store_name?item.store_name:'暂未填写'}}</view>
							<view class="shopAdd">{{item.address+item.address_detail}}</view>
							<view class="tag" v-if="item.is_lc && !item.is_ld">冷藏</view>
							<view class="tag" v-if="item.is_ld && !item.is_lc">冷动</view>
							<view class="tag" v-if="item.is_ld && item.is_lc">冷动冷藏</view>
							<view class="distance">距离：<text>{{item.distance_km}}</text></view>
						</view>
						<view class="status imgPublic">
							<image v-if="selZiti.id != item.id" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
							<image v-if="selZiti.id == item.id" src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="list empty imgPublic" v-else>
				<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/empty.png" mode="widthFix"></image>
			</view>
		</view>
		<view :class="['bottomBtn',device == 'ios'?'ios_padding':'']">
			<view class="btn active" @tap.stop='changeZiti'>确认自提点</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../tools/qqmap-wx-jssdk.js';
	export default {
		data() {
			return {
				pageHeader:getApp().globalData.pageHeader,
				pageStatus:getApp().globalData.pageStatus,
				
				ptid:'',//拼团
				msid:'',//秒杀
				id:'',//新人礼
				
				device:getApp().globalData.platform,
				address:"",
				add_detail:'',
				lat:'',
				lng:'',
				covers:[],
				keyword:'',
				currentZiti:{},
				list:[],
				selZiti:{},
				link:'',
			};
		},
		onLoad(e) {
			this.link = this.tool.objToUrl(e);
			this.currentZiti = e.leaderInfo?JSON.parse(e.leaderInfo):{};
			this.ptid = e.ptid?e.ptid:'';
			this.msid = e.msid?e.msid:'';
			this.id = e.id?e.id:'';
			this.initMap(1);
		},
		onShareAppMessage() {
			this.tool.monitor(this.link);
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor(this.link);
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			initList(){
				this.tool.getData('/api/mall/returnTeamList',{
					lat:this.lat,
					lng:this.lng,
					keyword:this.keyword,
				}).then(res=>{
					if(res && res.length){
						this.covers = [];
						res.map((item,index)=>{
							this.covers.push({
								id:item.id,
								latitude:item.lat,
								longitude:item.lng,
								title:item.store_name,
								// iconPath:item.store_imgs?item.store_imgs:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shop.png',
								iconPath:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/shop.png',
								width:30,
								height:30,
								callout:{
									content:item.store_name,
									color:'#ffffff',
									fontSize:14,
									borderRadius:4,
									borderWidth:1,
									borderColor:'#262E3B',
									bgColor:'#262E3B',
									padding:12,
									display:'BYCLICK',
									textAlign:'center'
								},
							})
						})
						this.list = res;
					}else{
						this.covers = [];
						this.list = [];
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initMap(status){
				const tMap = new QQMapWX({
				    key: getApp().globalData.mapKey //开发者密钥
				});
				var map = uni.createMapContext('map');
				uni.getLocation({
					type:'wgs84',
					success: (res) => {
						console.log('位置',res);
						this.lat = res.latitude;
						this.lng = res.longitude;
						map.moveToLocation();
						uni.request({
							url:'https://apis.map.qq.com/ws/geocoder/v1/?key='+getApp().globalData.mapKey+'&location='+this.lat+','+this.lng,
							success:(locate)=>{
								console.log('locate',locate);
								if(locate.errMsg == 'request:ok'){
									this.address = locate.data.result.ad_info.city+locate.data.result.ad_info.district+locate.data.result.formatted_addresses.recommend;
									this.add_detail = locate.data.result.formatted_addresses.recommend;
								}else{
									uni.showToast({
										title:"地理位置获取失败",
										icon:"none"
									})
								}
							},
							fail:(err)=>{
								console.log(err);
								uni.showToast({
									title:"地理位置解析失败",
									icon:"none"
								})
							}
						})
					},
					fail:(err)=>{
						console.log(err);
					},
					complete:()=>{
						if(status){
							this.initList();
						}
					}
				})
			},
			// 确认自提点
			changeZiti(){
				if(this.selZiti.id == this.currentZiti.id){
					uni.navigateBack({
						delta:1
					})
				}else{
					uni.showModal({
						content:'确定修改为当前自提点？',
						success: (op) => {
							if(op.confirm){
								let pages = getCurrentPages();
								let prevPage = pages[pages.length - 2];
								prevPage.$vm.leaderInfo.address = this.selZiti.address+this.selZiti.address_detail;
								prevPage.$vm.leaderInfo.address_id = this.selZiti.id;
								prevPage.$vm.leaderInfo.mobile = this.selZiti.mobile;
								prevPage.$vm.leaderInfo.phone = this.selZiti.phone;
								prevPage.$vm.leaderInfo.nickname = this.selZiti.receiver;
								prevPage.$vm.leaderInfo.id = this.selZiti.user_id;
								prevPage.$vm.leaderInfo.store_imgs = this.selZiti.store_imgs;
								prevPage.$vm.leaderInfo.distance_km = this.selZiti.distance_km;
								prevPage.$vm.leaderInfo.store_name = this.selZiti.store_name;
								prevPage.$vm.leaderInfo.address_detail = this.selZiti.address_detail;
								uni.navigateBack({
									delta:1
								})
							}
						}
					})
				}
			},
			// 重新定位
			refresh(){
				this.initMap();
			},
			// 关键词搜索
			searchKw(){
				this.initList();
			},
			// 选择自提点
			selZt(line){
				this.selZiti = line;
			},
			// 返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.ziti{
		width: 100%;
		padding-bottom: 100px;
		.shopList{
			width:96%;
			margin: 0 auto;
			padding:30rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background: white;
			.list{
				width: 100%;
				margin-top: 12px;
				.shopOne{
					width: 100%;
					padding:12rpx;
					box-sizing: border-box;
					border: 2px solid white;
					.shopInfo{
						flex: 1;
						// padding-bottom: 12rpx;
						// border-bottom: 1px solid #e6e6e6;
						.info{
							flex: 1;
							.shopName{
								font-weight: bold;
							}
							.shopAdd{
								font-size: 12px;
								color: #999999;
								margin: 8rpx 0;
							}
							.tag{
								width: max-content;
								font-size: 12px;
								color: #4095E5;
								border:1px solid #4095E5;
								padding: 2px;
								border-radius: 4px;
							}
							.distance{
								margin: 12rpx 0;
								font-size: 13px;
								font-weight: bold;
								color: #FF0000;
							}
						}
						.status{
							width: 48rpx;
							margin-left: 32rpx;
						}
					}
					.shopImg{
						width: 148rpx;
						height: 148rpx;
						margin-right: 12rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 4px;
						}
					}
				}
				.active{
					border: 2px solid #FF6319;
					border-radius: 4px;
				}
			}
			.title{
				width: 100%;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.current{
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;
			background: linear-gradient(to bottom,#ffffff,#f4f4f4);
			border-radius: 40rpx 40rpx 0px 0px;
			margin-bottom: 22rpx;
			.shop{
				width: 100%;
				position: relative;
				.shopContent{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					.content{
						width: 100%;
						height: 100%;
						padding:30rpx;
						box-sizing: border-box;
						.shopInfo{
							flex: 1;
							.shopName{
								font-weight: bold;
							}
							.shopAdd{
								font-size: 12px;
								color: #999999;
								margin: 8rpx 0;
							}
							.tag{
								width: max-content;
								font-size: 12px;
								color: #4095E5;
								border:1px solid #4095E5;
								padding: 2px;
								border-radius: 4px;
							}
							.distance{
								margin: 12rpx 0;
								font-size: 13px;
								font-weight: bold;
							}
						}
						.shopLogo{
							width: 148rpx;
							height: 148rpx;
							margin-right: 12rpx;
							image{
								width: 100%;
								height: 100%;
								border-radius: 4px;
							}
						}
					}
					.txt{
						position: absolute;
						right:33rpx;
						top:6rpx;
						color: white;
						font-size: 12px;
						font-weight: bold;
					}
				}
			}
			.address{
				width: 100%;
				margin-bottom: 20rpx;
				.currentAdd{
					width: 100%;
					.addLeft{
						flex:1;
						color: #333333;
						font-weight: bold;
						.addIcon{
							width: 30rpx;
							margin-right: 4px;
						}
					}
					.refresh{
						width: auto;
						font-size: 12px;
						color: #4095E5;
						margin-left: 12px;
						.refreshIcon{
							width: 30rpx;
							margin-right: 4px;
						}
					}
				}
				.detail_add{
					width: 100%;
					color: #999999;
					font-size: 12px;
					margin-top: 4rpx;
				}
			}
		}
		.map{
			width: 100%;
			height: 375px;
		}
		.bottomBtn{
			width: 100%;
			position: fixed;
			bottom: 0;
			background: white;
			left: 0;
			padding:20rpx 30rpx 0;
			box-sizing: border-box;
			.btn{
				width: 100%;
				text-align: center;
				padding: 24rpx 0;
				background: #F4F4F4;
				color:#999999;
				font-size: 16px;
				font-weight: bold;
				border-radius:50px;
			}
			.active{
				background: #FF6319;
				color: #ffffff;
			}
		}
		.ios_padding{
			padding-bottom:env(safe-area-inset-bottom);
		}
	}
	.pageHeader{
		position:fixed;
		top:0;
		left:12px;
		z-index:10;
		.backIcon{
			width: 62rpx;
		}
		.searchBox{
			width: 60%;
			background: white;
			border: 1px solid #FF6319;
			border-radius: 40px;
			padding: 10rpx 24rpx;
			box-sizing: border-box;
			margin-left: 12rpx;
			.searchIcon{
				width: 32rpx;
				margin-right: 8rpx;
			}
		}
	}
</style>
